
<template>
	<div class="gongyingshangshangpin">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>在售商品</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <!-- 1 -->
          <div class="flex">
            <div class="flexcc" style="cursor: pointer;" :class="search.status == 100?'sxjact':'sxj'" @click="changestatus(100)">上架中</div>
            <div class="flexcc" style="cursor: pointer;" :class="search.status == 0?'sxjact':'sxj'" @click="changestatus(0)">已下架</div>
          </div>
          <!-- 2 -->
          <div class="flexbc" style="margin-top: 40px;" v-if="search.status == 100">
            <div style=" width: 300px; height: 100px; background: #fff; border-radius: 20px; padding: 20px;">
              <div style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">我的销售橱窗</div>
              <div class="flexc">
                <div class="flex">
                  <img :src="list[0].image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 30px; height: 30px; border-radius: 15px;" v-if="list.length>0">
                  <img :src="list[1].image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 30px; height: 30px; border-radius: 15px; position: relative; left: -10px;" v-if="list.length>1">
                  <img :src="list[2].image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 30px; height: 30px; border-radius: 15px; position: relative; left: -20px;" v-if="list.length>2">
                </div>
                <div style="color: rgb(0, 90, 255); font-size: 14px; cursor: pointer;" @click="go2('/weixiaodian')">
                  当前共{{total - shield_num}}件商品 >
                </div>
              </div>
            </div>
            <div class="flex">
              <div style="max-width: 516px; height: 100px; background: rgb(255, 255, 255);border-radius: 20px;" class="flexc" @click="copy(wailian)">
                <div style="padding: 0 20px;">
                  <div style="color: rgb(175, 179, 188); margin-bottom: 10px;">{{wailian}}</div>
                  <div style="cursor: pointer;">复制链接</div>
                </div>
              </div>
              <div style="width: 100px; height: 100px; background: rgb(255, 255, 255);border-radius: 20px; margin-left: 20px; cursor: pointer;" class="flexcc"  @click="openw(wailian)">
                <div>
                  <div class="flexcc"><img src="../../../static/img/lianjie.png" style="width: 24px; margin-bottom: 16px;"></div>
                  <div>打开链接</div>
                </div>
              </div>
              <div style="width: 100px; height: 100px; background: rgb(255, 255, 255);border-radius: 20px; margin-left: 20px; cursor: pointer;" class="flexcc" @click="creatQrCode(1)">
                <div>
                  <div class="flexcc"><img src="../../../static/img/erweima.png" style="width: 24px; margin-bottom: 16px;"></div>
                  <div >下载二维码</div>
                </div>
              </div>
<!--              <div style="width: 100px; height: 100px; background: rgb(255, 255, 255);border-radius: 20px; margin-left: 20px; cursor: pointer;" class="flexcc" @click="xiazaiapp()">
                <div>
                  <div class="flexcc"><img src="https://file.91haoka.cn/xiaoluohao/xiaoluohaoapp2.png" style="width: 24px; margin-bottom: 16px;"></div>
                  <div >下载APP</div>
                </div>
              </div> -->
            </div>
          </div>
          <!-- 3 -->
          <div style="padding: 38px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
            <div><img src="../../../static/img/gongyingshang1.png" style="width: 22px; margin-right: 10px;"></div>
            <div>供应商检索</div>
          </div>
          <!-- 4 -->
          <div style="height: 112px; background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;" class="flexb">

              <div class="flex">
                <div>
                  <div style="margin-bottom: 10px;">商品名称</div>
                  <div><el-input v-model="search.title" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                </div>
                <div>
                  <div style="margin-bottom: 10px;">商品编码</div>
                  <div><el-input v-model="search.fetch_code" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                </div>
                <div>
                  <div style="margin-bottom: 10px;">佣金区间</div>
                  <div class="flexc">
                    <div><el-input v-model="search.commission_start" style="width: 120px; margin-right: 10px;" placeholder="请输入"></el-input></div>
                    <div style="color:rgb(175, 179, 188);">~</div>
                    <div><el-input v-model="search.commission_end" style="width: 120px; margin-left: 10px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                  </div>
                </div>
                <div>
                  <div style="margin-bottom: 10px;">卖点</div>
                  <div><el-input v-model="search.selling_point" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                </div>

                <div style="margin-right: 30px;">
                  <div style="margin-bottom: 10px;">&nbsp;</div>
                  <div><el-button type="primary" round icon="el-icon-search" @click="sousuo">检索</el-button></div>
                </div>
                <div v-if="search.order == 1" style="cursor: pointer;">
                  <div style="margin-bottom: 10px;">&nbsp;</div>
                  <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px;">倒序排列 <i class="el-icon-sort" style="margin-left: 10px;" @click="changorder(0)"></i></div>
                </div>
                <div v-if="search.order == 0 || search.order == ''" style="cursor: pointer;">
                  <div style="margin-bottom: 10px;">&nbsp;</div>
                  <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px;">正序排列 <i class="el-icon-sort" style="margin-left: 10px;" @click="changorder(1)"></i></div>
                </div>
              </div>
              <!-- <div style="margin-right: 30px;">
                <div style="margin-bottom: 10px;">自动上架</div>
                <div><el-switch v-model="autogrounding" @change="gengxinautogrounding" style="width: 85px; height: 41px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
              </div> -->

          </div>
          <!-- 5 -->
          <div class="flex" style="margin-top: 20px; " v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <div style="width: 500px; min-height: 335px; padding: 20px; margin-bottom: 20px; background: rgb(255, 255, 255); border-radius: 20px;  margin-right: 15px;" v-for="(item,index) in list" :key="item.id">
              <div class="flexbc">
                <div class="flex">
                  <!-- <div style="color: rgb(2, 12, 29); font-size: 12px; margin-right: 20px;">供应商:{{item.supplier_name}}</div> -->
                  <div style="color: rgb(212, 215, 222); font-size: 12px;display: inline-block">发布时间: {{item.created_at}}</div>
                  <div v-if="item.status==0&&item.up_down_at" style="display: inline-block;color: rgb(212, 215, 222);font-size: 12px;margin-left: 102px;">下架时间：{{item.up_down_at}}</div>
                </div>
                <div class="flex">
                  <div v-if="item.settlement_method == 1&&item.status==100" style="background:linear-gradient(#FF00D3, #FF3500); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px;" class="flexcc" >秒返</div>
                  <div style="background: rgb(254, 61, 61); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px;margin-left: 10px;" class="flexcc" v-if="item.is_main == 1">主推</div>
                  <div style="background: rgb(0, 90, 255); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px; margin-left: 10px;" class="flexcc" v-if="item.is_top">置顶</div>
                </div>
              </div>
              <div class="flex" style="margin-top: 20px; cursor: pointer;" >
                <div @click="logfuwenbenkai(item)" style="position: relative;"><img :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 100px; height: 100px; border-radius: 10px;">

                </div>
                <div style="margin-left: 20px; width: 330px;">
                  <div style="color: rgb(2, 12, 29); font-size: 16px; font-weight: bold; line-height: 19px; margin-bottom: 7px;" >{{item.title}}</div>
                  <div style="color: #999; font-size: 14px; margin-bottom: 10px;display: inline-block;" >商品编码: {{item.fetch_code}}</div>
                  <div style="color: rgb(0, 90, 255); font-size: 14px;display: inline-block;margin-left: 16px;" @click="logfuwenbenkai(item)">商品资料></div>
                  <div v-if="item.card_cost!='0.00'" style="color:#FF0C0C;font-size:14px;">销售售价：￥{{ item.card_cost }}</div>
                  <div v-else style="font-size:14px;">免费领取</div>
                  <div style="margin: 10px 0 0 0; font-size: 12px; color: rgb(120, 125, 133); margin-bottom: 20px;">
                  <!-- <el-tooltip class="item" effect="dark" placement="top">
                        <div slot="content">
                          <span>上游给我的佣金规则：{{item.p_rules}} </span>
                          <span v-if="item.p_active_commission != 0">已激活，佣金{{item.p_active_commission}}元.</span>
                          <span v-if="item.p_first_recharge_one_commission != 0">首充大于{{item.p_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.p_first_recharge_one_commission}}</span>元</span>
                          <span v-if="item.p_first_recharge_two_commission != 0">或者首充大于{{item.p_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.p_first_recharge_two_commission}}</span>元.</span>
                          <span v-if="item.p_recharge_amount_one_commission != 0">累计充值大于{{item.p_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.p_recharge_amount_one_commission}}</span>元</span>
                          <span v-if="item.p_recharge_amount_two_commission != 0">且累计充值大于{{item.p_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.p_recharge_amount_two_commission}}</span>元.</span>
                        </div>
                        <div style="margin-bottom: 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
                          <span>上游给我的佣金规则：{{item.p_rules}} </span>
                          <span v-if="item.p_active_commission != 0">已激活，佣金{{item.p_active_commission}}元.</span>
                          <span v-if="item.p_first_recharge_one_commission != 0">首充大于{{item.p_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.p_first_recharge_one_commission}}</span>元</span>
                          <span v-if="item.p_first_recharge_two_commission != 0">或者首充大于{{item.p_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.p_first_recharge_two_commission}}</span>元.</span>
                          <span v-if="item.p_recharge_amount_one_commission != 0">累计充值大于{{item.p_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.p_recharge_amount_one_commission}}</span>元</span>
                          <span v-if="item.p_recharge_amount_two_commission != 0">且累计充值大于{{item.p_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.p_recharge_amount_two_commission}}</span>元.</span>
                        </div>
                  </el-tooltip> -->
                  <!-- <el-tooltip class="item" effect="dark" placement="top">
                        <div slot="content">
                          <span>上游给我的佣金规则：{{item.c_rules}} </span>
                          <span v-if="item.c_active_commission != 0 && item.c_active_commission != null">已激活，佣金{{item.c_active_commission}}元.</span>
                          <span v-if="item.c_first_recharge_one_commission != 0 && item.c_first_recharge_one_commission != null ">首充大于{{item.c_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_one_commission}}</span>元</span>
                          <span v-if="item.c_first_recharge_two_commission != 0 && item.c_first_recharge_two_commission != null">或者首充大于{{item.c_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_two_commission}}</span>元.</span>
                          <span v-if="item.c_recharge_amount_one_commission != 0 && item.c_recharge_amount_one_commission != null">累计充值大于{{item.c_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_one_commission}}</span>元</span>
                          <span v-if="item.c_recharge_amount_two_commission != 0 && item.c_recharge_amount_two_commission != null">且累计充值大于{{item.c_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_two_commission}}</span>元.</span>
                        </div>
                        <div style="margin-bottom: 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
                          <span>上游给我的佣金规则：{{item.c_rules}} </span>
                          <span v-if="item.c_active_commission != 0 && item.c_active_commission != null">已激活，佣金{{item.c_active_commission}}元.</span>
                          <span v-if="item.c_first_recharge_one_commission != 0 && item.c_first_recharge_one_commission != null">首充大于{{item.c_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_one_commission}}</span>元</span>
                          <span v-if="item.c_first_recharge_two_commission != 0 && item.c_first_recharge_two_commission != null">或者首充大于{{item.c_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_two_commission}}</span>元.</span>
                          <span v-if="item.c_recharge_amount_one_commission != 0 && item.c_recharge_amount_one_commission != null">累计充值大于{{item.c_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_one_commission}}</span>元</span>
                          <span v-if="item.c_recharge_amount_two_commission != 0 && item.c_recharge_amount_two_commission != null">且累计充值大于{{item.c_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_two_commission}}</span>元.</span>
                        </div>
                  </el-tooltip> -->
                  <div class="flexbc" style="font-size: 14px;justify-content: start;">
                    <div class="flexbc" style="margin-right: 20px;">
                      <div >销售佣金</div>

                      <div v-if="item.settlement_status!=3" style="color: #FF9E00; font-size: 16px; font-weight: bold;">￥{{item.commission}}</div>

                      <div style="color: #FF9E00; font-size: 16px; font-weight: bold;" v-if="item.active_commission && item.settlement_status==3">
                        ￥{{ item.active_commission }} -￥
                        <span v-if="item.first_recharge_two_commission>item.first_recharge_one_commission">{{ addNum(item.active_commission,item.first_recharge_two_commission) }} </span>
                        <span v-if="item.first_recharge_two_commission<item.first_recharge_one_commission">{{ addNum(item.active_commission,item.first_recharge_one_commission) }} </span>
                        <i @click="openyj(item)" style="margin-left: 10px;color: #6A6A6A;" class="el-icon-warning"></i>
                      </div>

                      <div  style="color: #FF9E00; font-size: 16px; font-weight: bold;" v-if="!item.active_commission && item.settlement_status==3">
                        <span v-if="item.first_recharge_one_commission&&item.first_recharge_two_commission">
                            <span v-if="item.first_recharge_one_commission<item.first_recharge_two_commission">
                              <span>￥{{item.first_recharge_one_commission}} - </span><span>￥{{item.first_recharge_two_commission}}</span>
                            </span>
                            <span v-else>
                              <span>￥{{item.first_recharge_two_commission}} - </span><span>￥{{item.first_recharge_one_commission}}</span>
                            </span>
                        </span>
                        <span v-else-if="item.first_recharge_one_commission">
                           <span>￥{{item.first_recharge_one_commission}}</span>
                        </span>
                        <span v-else>
                           <span>￥{{item.first_recharge_two_commission}}</span>
                        </span>


                        <i @click="openyj(item)" style="margin-left: 10px;color: #6A6A6A;" class="el-icon-warning"></i>
                      </div>

                    </div>

                    <!-- 有无自定义名称 -->
                    <div v-if="zidingyi.commission_hide == 1">
                      <div v-if="item.is_qfx==1" class="flexbc" style="">
                        <div>{{zidingyi.commission_name || '分销奖励'}}</div>
                        <div style="color: #FF9E00; font-size: 16px; font-weight: bold;">￥{{item.reward_amount}}</div>
                      </div>
                      <div v-else class="flexbc" style="">
                        <div>{{zidingyi.commission_name || '分销抽成'}}</div>
                        <div style="color: #FF9E00; font-size: 16px; font-weight: bold;">￥{{item.agent_fee}}</div>

                        <i
                          class="el-icon-tickets"
                          style="margin-left: 10px;color: #4b7dff;"
                          @click="jilu(item)"
                        ></i>
                      </div>


                    </div>
                  </div>
                </div>
                  </div>
              </div>

              <div style="font-size: 14px;color: #787D85;">
                <el-tooltip v-if="item.commission_rule" class="item" effect="dark" :content="item.commission_rule" placement="top-start">
                  <div style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 100%;">佣金规则：{{item.commission_rule}}</div>
                </el-tooltip>
                  <div v-else style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 100%;">佣金规则：</div>
              </div>
              <div class="flex" style="margin-top: 15px;">
                    <div style="color: rgb(254, 61, 61); background: rgb(255, 242, 242); margin-bottom: 10px;" class="flexcc xt" v-if="item.selling_point.length > 0 && item.selling_point[0]">{{item.selling_point[0]}}</div>
                    <div style="color: rgb(31, 159, 48); background: rgb(229, 255, 217); margin-bottom: 10px;" class="flexcc xt" v-if="item.selling_point.length > 1 && item.selling_point[1]">{{item.selling_point[1]}}</div>
                    <div style="color: rgb(189, 55, 255); background: rgb(251, 239, 255); margin-bottom: 10px;" class="flexcc xt" v-if="item.selling_point.length > 2 && item.selling_point[2]">{{item.selling_point[2]}}</div>
                    <div style="color: rgb(55, 175, 255); background: rgb(239, 250, 255); margin-bottom: 10px;" class="flexcc xt" v-if="item.selling_point.length > 3 && item.selling_point[3]">{{item.selling_point[3]}}</div>
              </div>
              <div class="flexbc" style="margin-top: 15px;">
                <div class="flex">
                  <div class="flexcc ljact" @click="fuzhidizhi(item.id)">推广链接</div>
                  <div class="flexcc lj" @click="openw2(item)">打开链接</div>
                  <!-- <div class="flexcc lj" @click="creatQrCode(2,item)">下载二维码</div> -->
                  <div class="flexcc lj" @click="haibao(item)">推广海报</div>
                  <div v-if="item.block_id == null" class="flexcc lj" @click="pingbi(item)">屏蔽商品</div>
                  <div v-if="item.block_id != null" class="flexcc lj" @click="pingbi(item)" style="background: #f00; color: #fff;">已屏蔽</div>
                </div>
                <!-- <div @click="xuanzhong(item)">
                  <el-dropdown @command="handleCommand" trigger="click" >
                    <span class="el-dropdown-link">
                      <img src="../../../static/img/gengduo.png" style="width: 32px; height: 32px; border-radius: 16px; cursor: pointer;">
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="a">编辑商品</el-dropdown-item>
                      <el-dropdown-item command="b" v-if="!dangqianshangpin.is_top">置顶</el-dropdown-item>
                      <el-dropdown-item command="c" v-if="!dangqianshangpin.is_main">主推</el-dropdown-item>
                      <el-dropdown-item command="bb" v-if="dangqianshangpin.is_top">取消置顶</el-dropdown-item>
                      <el-dropdown-item command="cc" v-if="dangqianshangpin.is_main">取消主推</el-dropdown-item>
                      <el-dropdown-item command="d">设置排序</el-dropdown-item>
                      <el-dropdown-item command="e" v-if="dangqianshangpin.status == 100">下架商品</el-dropdown-item>
                      <el-dropdown-item command="f" v-if="dangqianshangpin.status == 0">上架商品</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div> -->
              </div>
              <div style="color: rgb(254, 61, 61); font-size: 12px; margin-top: 10px;">
                <el-tooltip class="item" effect="dark" :content="item.points" placement="top-start">
                  <div style="width:100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">{{item.points}}</div>
                </el-tooltip>
              <!-- {{item.points}} -->
              </div>
            </div>
          </div>
          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page"
           @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
		   <!-- <footers></footers> -->
        </div>



      </div>
    </div>
    <el-dialog
      title="更改记录"
      :visible.sync="jilulog"
      width="370px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="line-height: 40px;">
<!--        <div class="flex">
          <div style="flex: 1;">日期</div>
          <div style="flex: 1;">佣金(元)</div>
        </div> -->
        <div class="flex" v-for="item in jilulist" :key="item.id">
          <div style="flex: 1;">{{item.created_at}}</div>
          <div style="flex: 1;">更改为{{item.old_commission}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="jilulog = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="fuwenbentitle+'商品详情'" :visible.sync="logfuwenben" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div v-html="fuwenben"></div>
      <div class="baibeijing" style="margin-top: 20px;padding-left: 0;">
        <div class="flex">
                    <div><img src="../../../static/img/shangjia-2.png" style="width: 18px; margin-right: 10px"></div>
                    <div style="margin-bottom: 10px;margin-right: 10px;">上下架状态 :
                      <div v-if="sxjstatus==100" style="display: inline-block;color: #6A6A6A;">上架</div>
                      <div v-if="sxjstatus==0" style="display: inline-block;color: #6A6A6A;">下架</div>
                    </div>

                    <div><img src="../../../static/img/shangxianshijian.png" style="width: 18px; margin-right: 10px"></div>
                    <div style="margin-bottom: 10px;margin-right: 10px;">上线时间 : {{ created_at }}</div>

                    <div><img src="../../../static/img/kaika.png" style="width: 22px; margin-right: 10px"></div>
                    <div style="margin-bottom: 10px;margin-right: 10px;">开卡年龄 : {{ min_age }}~{{ max_age }}</div>


                    <div><img src="../../../static/img/heyueqi.png" style="width: 22px; margin-right: 10px"></div>
                    <div style="margin-bottom: 10px;margin-right: 10px;">合约期 :
                      <div v-if="contract==0" style="display: inline-block;color: #6A6A6A">无</div>
                      <div v-if="contract==1" style="display: inline-block;color: #6A6A6A">1个月</div>
                      <div v-if="contract==2" style="display: inline-block;color: #6A6A6A">2个月</div>
                      <div v-if="contract==3" style="display: inline-block;color: #6A6A6A">3个月</div>
                      <div v-if="contract==4" style="display: inline-block;color: #6A6A6A">4个月</div>
                      <div v-if="contract==5" style="display: inline-block;color: #6A6A6A">5个月</div>
                      <div v-if="contract==6" style="display: inline-block;color: #6A6A6A">6个月</div>
                      <div v-if="contract==7" style="display: inline-block;color: #6A6A6A">7个月</div>
                      <div v-if="contract==8" style="display: inline-block;color: #6A6A6A">8个月</div>
                      <div v-if="contract==9" style="display: inline-block;color: #6A6A6A">9个月</div>
                      <div v-if="contract==10" style="display: inline-block;color: #6A6A6A">10个月</div>
                      <div v-if="contract==11" style="display: inline-block;color: #6A6A6A">11个月</div>
                      <div v-if="contract==12" style="display: inline-block;color: #6A6A6A">12个月</div>
                      <div v-if="contract==24" style="display: inline-block;color: #6A6A6A">24个月</div>
                      <div v-if="contract==36" style="display: inline-block;color: #6A6A6A">36个月</div>
                    </div>




                    <div><img src="../../../static/img/24gf-thumbsUp2.png" style="width: 18px; margin-right: 10px"></div>
                    <div style="margin-bottom: 10px;margin-right: 10px;">支持选号 :
                      <div v-if="take_number==1||take_number==2" style="display: inline-block;color: #6A6A6A;">支持</div>
                      <div v-if="take_number==0" style="display: inline-block;color: #6A6A6A;">不支持</div>
                    </div>
        </div>
        <div class="flex">
          <div>
            <img src="../../../static/img/kuaidi.png" style="width: 22px; margin-right: 10px">
          </div>
          <div style="margin-right: 10px;">快递方式 : {{ express }}</div>


          <div><img src="../../../static/img/jihuo.png" style="width: 22px; margin-right: 10px"></div>
          <div style="margin-bottom: 10px;margin-right: 10px;">激活方式 : {{ activation_method }}</div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="logfuwenben = false">关闭</el-button>

      </span>
    </el-dialog>
    <el-dialog title="推广二维码" :visible.sync="erweima_log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto; max-width: 100%;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="erweima_log = false">关闭</el-button>
        <el-button type="primary" @click="xiazai">下载</el-button>
      </span>
    </el-dialog>
    <el-dialog title="设置排序" :visible.sync="paixu_log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div><el-input v-model="dangqianshangpin.order" style="width: 360px;"></el-input></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paixu_log = false">关闭</el-button>
        <el-button type="primary" @click="xiugai">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="下载APP" :visible.sync="applog" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="qrcode flexcc" ref="qrCodeUrlx" style="margin: 0 auto; max-width: 100%;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="applog = false">关闭</el-button>
        <el-button type="primary" @click="xiazaiapp2">下载</el-button>
      </span>
    </el-dialog>



    <!-- 手机版 -->
    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; padding-bottom: 1rem; background: #f6f8fb;">
      <mtop></mtop>
      <div  style="padding: 0.3rem; background: #fff;">
        <div class="flexbc">
          <div style="width: 5.6rem; background: #f6f8fb; border-radius: 20px; height: 41px; border-radius: 41px; border: 1px solid #e3e8f1;" class="flexc">
            <div class="flexcc" style="width: 1.5rem;" @click="c1show = true">
              <div style="color: rgb(175, 179, 188); margin-right: 0.1rem;">{{c1name}}</div>
              <div><img src="../../../static/mimg/n15.png"></div>
            </div>
            <div>
              <el-input v-model="search.goods_info" class="minput" placeholder="请输入商品名称/编码"></el-input>
            </div>
          </div>
          <div @click="sousuo" class="flexcc" icon="el-icon-search" style="background: rgb(0, 90, 255); height: 41px; border-radius: 41px; padding: 0 0.3rem; color: #fff;">检索</div>
        </div>
        <div class="flexc" style="padding-top: 0.3rem;">
          <div class="flexcc" style="flex: 1;" @click="c2show = true">
            <div v-if="!c2name" style="color:#ccc; margin-right: 0.1rem;">结算类型</div>
            <div v-else style="color: rgb(0, 90, 255); margin-right: 0.1rem;">{{c2name}}</div>
            <div><img src="../../../static/mimg/n15.png"></div>
          </div>
          <div class="flexcc" style="flex: 1;">
            <div v-if="search.order == 1" @click="changorder(0)">
              <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px;">发布时间 <i class="el-icon-sort" style="margin-left: 0.1rem;" ></i></div>
            </div>
            <div v-if="search.order == 0 || search.order == ''" @click="changorder(1)">
              <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px;">发布时间 <i class="el-icon-sort" style="margin-left: 0.1rem; color: rgb(0, 90, 255);" ></i></div>
            </div>
          </div>
          <div class="flexc" style="color: rgb(175, 179, 188); font-size: 12px;" @click="go('/shangpinguanli/zaishoushangpin/zaishoushangpinpaixu')">
            设置排列顺序
            <img src="../../../static/mimg/n24.png" style="margin-left: 0.1rem; width: 0.2rem;">
          </div>

          <div class="flexcc" style="flex: 1;" @click="c6show = true">
            <div style="color: rgb(175, 179, 188); margin-right: 0.1rem;">筛选</div>
            <div><img src="../../../static/mimg/n15.png"></div>
          </div>
        </div>
      </div>
      <van-popup v-model="c1show" round position="bottom">
        <van-picker  show-toolbar  :columns="orderoptions"  value-key="value" @cancel="c1show = false"  @confirm="c1ok" ></van-picker>
      </van-popup>

      <van-popup v-model="c2show" round position="bottom">
        <van-picker  show-toolbar  :columns="orderoptions2"  value-key="value" @cancel="c2show = false"  @confirm="c2ok" ></van-picker>
      </van-popup>

      <van-popup v-model="c6show" round position="center" style="width: 6.5rem; padding: 0.3rem; border-radius: 0.2rem;">
        <div style="font-size: 0.35rem; margin-bottom: 0.3rem;">
          筛选
        </div>
        <!-- <div class="flexbc" style="margin-bottom: 0.2rem;">
          <div>归属地</div>
          <div>
            <el-select clearable filterable style="width: 200px; margin-right: 30px;" v-model="search.guishudi" placeholder="请选择归属地">
                <el-option v-for="item in orderoptions3" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </div>
        </div> -->
        <div class="flexbc" style="margin-bottom: 0.2rem;">
          <div>运营商</div>
          <div>
            <el-select clearable filterable style="width: 200px; margin-right: 30px;" v-model="search.operator" placeholder="请选择运营商">
                <el-option v-for="item in orderoptions4" :label="item.value" :value="item.key" :key="item.value"></el-option>
            </el-select>
          </div>
        </div>


        <div class="flexbc">
          <div style="margin-bottom: 0.2rem;">佣金区间</div>
          <div class="flexc">
            <div style="width: 2.05rem;">
              <el-input v-model="search.commission_start" class="m2input" placeholder="最小佣金"></el-input>
            </div>
            <div style="line-height: 41px; margin: 0 0.1rem;">
              -
            </div>
            <div style="width: 2.05rem;">
              <el-input v-model="search.commission_end" class="m2input" placeholder="最大佣金"></el-input>
            </div>
          </div>


        </div>

        <div style="margin-top: 20px;text-align: center;">
          <el-button @click="chongzhi">重置</el-button>
          <el-button type="primary" @click="sousuo">确 定</el-button>
        </div>
      </van-popup>
      <div style="padding: 0.3rem;">

        <!-- <div class="flexbc" style="justify-content: space-between; margin-bottom: 0.3rem;">
          <div class="flexcc" style="cursor: pointer; text-align: center;" :class="search.status == 100?'sxjactsj':'sxjsj'" @click="changestatus(100)">上架中</div>
          <div class="flexcc" style="cursor: pointer; text-align: center;" :class="search.status == 0?'sxjactsj':'sxjsj'" @click="changestatus(0)">已下架</div>
        </div>
        <div style="margin-bottom: 0.3rem;" v-if="search.status == 100">
          <div style=" width: 100%;  background: #fff; border-radius: 0.2rem; padding: 0.2rem; margin-bottom: 0.3rem;">
            <div style="font-weight: 500; margin-bottom: 0.2rem;">我的销售橱窗</div>
            <div class="flexc">
              <div class="flex">
                <img :src="list[0].image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 0.4rem; height: 0.4rem; border-radius: 15px;" v-if="list.length>0">
                <img :src="list[1].image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 0.4rem; height: 0.4rem; border-radius: 15px; position: relative; left: -10px;" v-if="list.length>1">
                <img :src="list[2].image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 0.4rem; height: 0.4rem  ; border-radius: 15px; position: relative; left: -20px;" v-if="list.length>2">
              </div>
              <div style="color: rgb(0, 90, 255); font-size: 0.2rem; cursor: pointer;"  @click="go2('/weixiaodian')">
                当前共{{total - shield_num}}件商品 >
              </div>
            </div>
          </div>
          <div class="flexbc" style=" width: 100%;  background: #fff; border-radius: 0.2rem; padding: 0.2rem; margin-bottom: 0.3rem;">
            <div style="width: 100%; background: rgb(255, 255, 255); border-radius: 0.2rem;" class="flexc" @click="copy(wailian)">
              <div style="padding: 0 0.2rem;">
                <div style="color: rgb(175, 179, 188); margin-bottom: 0.1rem; ">{{wailian}}</div>
                <div style="cursor: pointer;">复制链接</div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 0.3rem;" v-if="search.status == 100">
          <div style="width: 1.3rem; height: 1.3rem; background: rgb(255, 255, 255); border-radius: 0.2rem; cursor: pointer; margin-right:0.2rem" class="flexcc"  @click="openw(wailian)">
            <div>
              <div class="flexcc"><img src="../../../static/img/lianjie.png" style="width: 0.3rem; margin-bottom: 0.2rem;"></div>
              <div style="font-size: 0.2rem;">打开链接</div>
            </div>
          </div>
          <div style="width: 1.3rem; height: 1.3rem; background: rgb(255, 255, 255); border-radius: 0.2rem; cursor: pointer; margin-right:0.2rem" class="flexcc"  @click="creatQrCode(1)">
            <div>
              <div class="flexcc"><img src="../../../static/img/erweima.png" style="width: 0.3rem; margin-bottom: 0.2rem;"></div>
              <div style="font-size: 0.2rem;">下载二维码</div>
            </div>
          </div>

        </div> -->
        <!-- <div style=" background: rgb(255, 255, 255); border-radius: 0.2rem; padding: 0.2rem; ">
            <div style="margin-bottom: 0.2rem;">
              <el-input v-model="search.title" placeholder="请输入商品名称"></el-input>
            </div>
            <div class="flexc" style="justify-content: space-between; margin-bottom: 0.2rem;">
              <div><el-input v-model="search.c_commission_start" style="width: 3rem; " placeholder="最小佣金"></el-input></div>
              <div style="color: color: rgb(175, 179, 188);">~</div>
              <div><el-input v-model="search.c_commission_end" style="width:  3rem; " placeholder="最大佣金"></el-input></div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.2rem;">
              <div><el-input v-model="search.selling_point" style="width: 3rem;" placeholder="请输入卖点"></el-input></div>
            </div>
            <div class="flexbc" >
              <div class="flexc">
                <div style="margin-right: 0.2rem;">
                  <div @click="sousuo" class="flexcc" icon="el-icon-search" style="background: rgb(0, 90, 255); height: 41px; border-radius: 41px; padding: 0 0.3rem; color: #fff;">检索</div>
                </div>
                <div v-if="search.order == 1">
                  <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px;">正序排列 <i class="el-icon-sort" style="margin-left: 10px;" @click="changorder(0)"></i></div>
                </div>
                <div v-if="search.order == 0 || search.order == ''">
                  <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px;">倒序排列 <i class="el-icon-sort" style="margin-left: 10px;" @click="changorder(1)"></i></div>
                </div>
              </div>

            </div>
          </div> -->
          <div >
            <div class="flex" v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
              <div style="width: 6.9rem; padding: 0.2rem; margin-bottom: 0.2rem; background: rgb(255, 255, 255); border-radius: 0.2rem; " v-for="(item,index) in list" :key="item.id">

                  <div class="flex" style="justify-content : space-between;">
                    <!-- <div v-if="item.settlement_method == 1&&item.status==100" style="background:linear-gradient(#FF00D3, #FF3500); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px;" class="flexcc" >秒返</div> -->
                    <div class="flex">
                      <div v-if="item.settlement_method == 1&&item.status==100" style="background:linear-gradient(#FF00D3, #FF3500); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px;" class="flexcc" >秒返</div>
                      <div v-if="item.settlement_method == 0&&item.status==100" style="background:linear-gradient(#33ccff, #ff99cc); border-radius: 4px; width: 42px; height: 20px; color: rgb(255, 255, 255); font-size: 12px;" class="flexcc" >次月返</div>
                      <div style="background: rgb(254, 61, 61); border-radius: 4px; width: 34px; height: 20px;  color: rgb(255, 255, 255); font-size: 12px;margin-left: 0.1rem;" class="flexcc" v-if="item.is_main == 1">主推</div>
                      <div style="background: rgb(0, 90, 255); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px; margin-left: 0.1rem;" class="flexcc" v-if="item.is_top">置顶</div>
                      <div style=" width: 4rem;">
                        <div style="color: rgb(2, 12, 29); font-weight: bold; font-size: 0.27rem;margin-left: 0.1rem " class="flexcc" >
                          <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start">
                            <div style="width:100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">{{item.title}}</div>
                          </el-tooltip>
                       </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex" style="justify-content : space-between;margin-top: 0.15rem">
                    <div class="flexcc" style="color: rgb(155, 155, 155);cursor: pointer;margin-left: 0.1rem;">商品编码 : {{item.fetch_code}}</div>
                    <div class="flexcc" style="color: rgb(0, 90, 255);cursor: pointer;margin-right: 0.1rem;" @click="clickZiliao(item)">查看资料 ></div>
                  </div>
                  <div>
                        <el-divider></el-divider>
                  </div>

                <div class="flex" style="margin-top: 0.2rem;" @click="clickZiliao(item)">
                  <div style="position: relative;"><img :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 1.8rem; height: 1.8rem; border-radius: 0.1rem; margin-bottom: 0.1rem;">

                  </div>
                  <div style="margin-left: 0.2rem; width: 4.5rem;">
                    <!-- <div style="color: rgb(2, 12, 29); font-weight: bold; font-size: 0.27rem; margin-bottom: 0.1rem;">
                      <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start">
                        <div style="width:100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">{{item.title}}</div>
                      </el-tooltip>
                    </div> -->
                    <!-- <div style="color: #999; font-size: 14px; margin-bottom: 0.1rem;">商品编码: {{item.fetch_code}}</div> -->
                    <div v-if="item.card_cost!='0.00'" style="font-size: 14px;color:#FF0C0C;font-weight: 400;">销售售价：
                      <span style="font-size: 14px;color:#FF0C0C;font-weight: 700;">
                        ￥{{ item.card_cost }}
                      </span>
                    </div>
                    <div v-else style="font-size: 14px;">免费领取</div>
                    <div class="flex" style="margin-top: 0.2rem;">
                      <div style="color: rgb(254, 61, 61); background: rgb(255, 242, 242); margin-bottom: 0.1rem;" class="flexcc xt" v-if="item.selling_point.length > 0 && item.selling_point[0]">{{item.selling_point[0]}}</div>
                      <div style="color: rgb(31, 159, 48); background: rgb(229, 255, 217); margin-bottom: 0.1rem;" class="flexcc xt" v-if="item.selling_point.length > 1 && item.selling_point[1]">{{item.selling_point[1]}}</div>
                      <div style="color: rgb(189, 55, 255); background: rgb(251, 239, 255); margin-bottom: 0.1rem;" class="flexcc xt" v-if="item.selling_point.length > 2 && item.selling_point[2]">{{item.selling_point[2]}}</div>
                      <div style="color: rgb(55, 175, 255); background: rgb(239, 250, 255); margin-bottom: 0.1rem;" class="flexcc xt" v-if="item.selling_point.length > 3 && item.selling_point[3]">{{item.selling_point[3]}}</div>
                    </div>
                    <div style="margin: 0px 0 0 0; font-size: 12px; color: rgb(120, 125, 133);margin-top: 0.1rem;">


                </div>

                  </div>
                </div>

                <div style="font-size: 14px;color: #787D85;margin-top: 4px;">
                <el-tooltip v-if="item.commission_rule" class="item" effect="dark" :content="item.commission_rule" placement="top-start" style="margin-bottom: 10px;">
                  <div style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 100%;">佣金规则：{{item.commission_rule}}</div>
                </el-tooltip>
                  <div v-else style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 100%;margin-bottom: 10px;">佣金规则：</div>

                <div class="baibeijinga">
                  <div class="flexbc" style="justify-content:space-around">
                    <div class="flexbc" style="width:48%;justify-content:center" >
                      <!-- <div>销售佣金</div> -->
                      <div v-if="item.settlement_status!=3" style="color: rgb(0, 90, 255); font-size: 16px; font-weight: bold;">￥{{item.commission}}</div>
                      <div v-if="item.active_commission && item.settlement_status==3" style="color: rgb(0, 90, 255); font-size: 16px; font-weight: bold;">￥{{ item.active_commission }}-￥
                        <span v-if="item.first_recharge_two_commission>item.first_recharge_one_commission">{{ addNum(item.active_commission,item.first_recharge_two_commission) }} </span>
                          <span v-if="item.first_recharge_two_commission<item.first_recharge_one_commission">{{ addNum(item.active_commission,item.first_recharge_one_commission) }} </span>
                        <i @click="openyj(item)" style="margin-left: 10px;color: #6A6A6A;" class="el-icon-warning"></i></div>
                        <div v-if="!item.active_commission && item.settlement_status==3" style="color: rgb(0, 90, 255); font-size: 16px; font-weight: bold;">
                          <span v-if="item.first_recharge_one_commission&&item.first_recharge_two_commission">
                            <span v-if="item.first_recharge_one_commission<item.first_recharge_two_commission">
                              <span>￥{{item.first_recharge_one_commission}} - </span><span>￥{{item.first_recharge_two_commission}}</span>
                            </span>
                            <span v-else>
                              <span>￥{{item.first_recharge_two_commission}} - </span><span>￥{{item.first_recharge_one_commission}}</span>
                            </span>
                        </span>
                        <span v-else-if="item.first_recharge_one_commission">
                           <span>￥{{item.first_recharge_one_commission}}</span>
                        </span>
                        <span v-else>
                           <span>￥{{item.first_recharge_two_commission}}</span>
                        </span>
                        <i @click="openyj(item)" style="margin-left: 10px;color: #6A6A6A;" class="el-icon-warning"></i></div>
                    </div>
                    <el-divider direction="vertical" v-if="zidingyi.commission_hide == 1"></el-divider>
                    <div v-if="zidingyi.commission_hide == 1" style="width:48%;justify-content:center">

                      <div v-if="item.is_qfx==1" class="flexcc" >
                        <!-- <div>分销奖励</div> -->
                        <div style="color: rgb(254, 61, 61); font-size: 16px; font-weight: bold;">￥{{item.reward_amount}}</div>
                      </div>
                      <div v-else class="flexcc">
                        <!-- <div>分销抽成</div> -->
                        <div style="color: rgb(254, 61, 61); font-size: 16px; font-weight: bold;">￥{{item.agent_fee}}</div>

                        <i
                          class="el-icon-tickets"
                          style="margin-left: 10px;color: #4b7dff;"
                          @click="jilu(item)"
                        ></i>
                      </div>
                    </div>

                  </div>
                  <div class="flexbc" style="justify-content: space-around;">
                    <div class="flexcc" style="flex: 1;">
                      <div>销售佣金</div>
                    </div>
                    <div v-if="zidingyi.commission_hide == 1" style="flex: 1;">
                      <div v-if="item.is_qfx==1" class="flexcc" >
                        <div>{{zidingyi.commission_name || '分销奖励'}}</div>
                      </div>
                      <div v-if="item.is_qfx!=1" class="flexcc" >
                        <div>{{zidingyi.commission_name || '分销抽成'}}</div>
                      </div>


                    </div>
                  </div>
                </div>


              </div>

                <div class="flexbc" style="margin-top: 0.2rem;">
                  <div class="flexc">
                    <div class="flexcc ljact" style="width: 1.4rem; font-size: 12px;" @click="fuzhidizhi(item.id)">推广链接</div>
                    <div class="flexcc lj" style="width: 1.4rem; font-size: 12px;" @click="openw2(item)">打开链接</div>
                    <!-- <div class="flexcc lj" style="width: 1.4rem; font-size: 12px;" @click="creatQrCode(2,item)">下载二维码</div> -->
                    <!-- <div class="flexcc lj" style="width: 1.4rem; font-size: 12px;" @click="haibao(item)">推广海报</div> -->

                    <div class="flexcc lj" style="width: 1.4rem; font-size: 12px;" @click="haibao(item)">推广海报</div>
                    <div v-if="item.block_id == null" class="flexcc lj" @click="pingbi(item)" style="width: 1.4rem; font-size: 12px;">屏蔽商品</div>
                    <div v-if="item.block_id != null" class="flexcc lj" @click="pingbi(item)" style="background: #f00; color: #fff; width: 1.4rem; font-size: 12px;">已屏蔽</div>
                  </div>
                </div>
                  <!-- 如果三个都有的css样式-->
                  <div v-if="item.points&&item.created_at&&item.up_down_at">
                    <div style="color: rgb(254, 61, 61); font-size: 12px; margin-top: 0.2rem;" >
                      <el-tooltip class="item" effect="dark" :content="item.points" placement="top-start" popper-class="tooltip-width">
                        <div style="width:60%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;float: left">{{item.points}}</div>
                      </el-tooltip>
                    </div>
                    <div style="color: rgb(212, 215, 222);text-align:right;margin-top: 0.2rem;font-size: 12px">{{item.created_at.split(' ')[0]}}</div>
                    <div v-if="item.status==0&&item.up_down_at" style="color: rgb(212, 215, 222); font-size: 12px; margin-top: 0.2rem;">
                        下架时间：{{ item.up_down_at }}
                    </div>
                  </div>

                  <!-- 如果上架状态没有注意点 -->
                  <div v-if="item.up_down_at&&item.status==100&&item.created_at&&!item.points">
                    <div style="color: rgb(212, 215, 222);text-align:right;margin-top: 0.2rem;font-size: 12px;margin-right: 0.2rem">{{item.created_at.split(' ')[0]}}</div>
                  </div>
                  <!-- 如果下架状态没有注意点-->
                  <div v-if="item.up_down_at&&item.status==0&&item.created_at&&!item.points">
                    <div  style="color: rgb(212, 215, 222); font-size: 12px; margin-top: 0.2rem;float: left">
                      下架时间：{{ item.up_down_at }}
                    </div>
                    <div style="color: rgb(212, 215, 222);text-align:right;margin-top: 0.2rem;font-size: 12px;margin-left: 1.7rem;float: left">{{item.created_at.split(' ')[0]}}</div>
                  </div>
                  <!-- 如果没有下架时间 -->
                  <div v-if="item.points&&item.created_at&&!item.up_down_at">
                    <div style="color: rgb(254, 61, 61); font-size: 12px; margin-top: 0.2rem"  >
                      <el-tooltip class="item" effect="dark" :content="item.points" placement="top-start" popper-class="tooltip-width">
                        <div style="width:60%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;float: left">{{item.points}}</div>
                      </el-tooltip>
                    </div>
                    <div style="color: rgb(212, 215, 222);text-align:right;margin-top: 0.2rem;font-size: 12px">{{item.created_at.split(' ')[0]}}</div>
                  </div>
                  <!-- 如果注意点和下架时间都没有 -->
                  <div v-if="!item.points&&!item.up_down_at" style="color: rgb(212, 215, 222);text-align:right;margin-top: 0.2rem;font-size: 12px">{{item.created_at.split(' ')[0]}}</div>

              </div>
            </div>
          </div>
          <!-- 当前环境：{{app}} -->
        </div>
        <div style="position: fixed; left: 0; bottom: 0; width: 100%; box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.05); background: rgb(255, 255, 255);">
          <mfooter></mfooter>
        </div>

      </div>
      <!-- <xiazaierweima ref="xiazaierweima" @guanbiloadlog="guanbiloadlog" :item="item" v-if="relo"></xiazaierweima> -->

      <html2canvass ref="html2canvass" :item="item" v-if="html2canvaslog"></html2canvass>

      <!-- 佣金 -->
      <el-dialog
        title="销售佣金明细"
        :visible.sync="isshowxs"
        width="300px">
        <div class="t_jh_font" v-if="xsitem.active_commission > 0">激活给：￥{{ xsitem.active_commission }}</div>
        <div class="t_jh_font" v-if="xsitem.first_recharge_one_commission > 0">激活且充值{{ xsitem.first_recharge_one }}给：￥{{ xsitem.first_recharge_one_commission }}</div>
        <div class="t_jh_font" v-if="xsitem.first_recharge_two_commission > 0">激活且充值{{ xsitem.first_recharge_two }}给：￥{{ xsitem.first_recharge_two_commission }}</div>
      </el-dialog>

      <van-popup v-model="loadlog" position="center" style="border-radius: 0.5rem; background: transparent;">
        <div class="flexcc" style="color: #fff; font-size: 0.33rem;" v-if="shoujiban">努力生成中，请稍等</div>
        <div class="flexcc" style="color: #fff; font-size: 20px;" v-if="!shoujiban">努力生成中，请稍等</div>
      </van-popup>
	  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
  import xiazaierweima from './zujian/xiazaierweima.vue'
  import html2canvass from "./zujian/html2canvas.vue";
  import mtop from '../mtop.vue'
  import mfooter from '../mfooter.vue'

	export default {
		name: 'gongyingshangshangpin',
    components:{
      left,top,topandleft,footers,xiazaierweima,mtop,mfooter,html2canvass
    },
		data() {
			return {
        html2canvaslog:false,
        all:{},
        search:{
          page:1,
          page_size:20,
          status:100,
          title:"",
          selling_point:"",
          order:"",
          operator:"",
          c_commission_start:"",
          c_commission_end:""
        },
        list:[],
        total:0,
        shield_num:0,
        dangqianshangpin:"",
        erweima_log:false,
        paixu_log:false,
        autogrounding:false,
        wailian:"",
        widthss:false,

        shoujiban:false,
        loading: false,
        finished: false,
        logfuwenben:false,
        fuwenben:"",
        min_age:'',
        max_age:'',
        contract:'',
        express:'',
        activation_method:'',
        sxjstatus:'',
        created_at:'',
        take_number:'',
        fuwenbentitle:"",
        item:"",
        relo:true,

        c1show:false,
        c1name:"上架中",
        c2show:false,
        // c2name:"结算类型",
        c2name:"",
        c3show:false,
        c3name:"激活状态",
        orderoptions:[
          {value:'上架中',key:100},
          {value:'已下架',key:0}
        ],
        c6show:false,
        orderoptions2:[
          {value:'秒返',key:1},
          {value:'次月返',key:0}
        ],
        orderoptions4:[
          {value:'中国联通',key:10010},
          {value:'中国移动',key:10086},
          {value:'中国电信',key:10000},
          {value:'中国广电',key:10099},
          {value:'虚拟运营商',key:11111},
        ],

        orderoptions3:[
          {value:'北京市',key:'北京市'},
          {value:'河北省',key:'河北省'},
          {value:'山西省',key:'山西省'},
          {value:'内蒙古自治区',key:'内蒙古自治区'},
          {value:'辽宁省',key:'辽宁省'},
          {value:'吉林省',key:'吉林省'},
          {value:'黑龙江省',key:'黑龙江省'},
          {value:'上海市',key:'上海市'},
          {value:'江苏省',key:'江苏省'},
          {value:'浙江省',key:'浙江省'},
          {value:'安徽省',key:'安徽省'},
          {value:'福建省',key:'福建省'},
          {value:'江西省',key:'江西省'},
          {value:'山东省',key:'山东省'},
          {value:'河南省',key:'河南省'},
          {value:'湖北省',key:'湖北省'},
          {value:'湖南省',key:'湖南省'},
          {value:'广东省',key:'广东省'},
          {value:'广西壮族自治区',key:'广西壮族自治区'},
          {value:'海南省',key:'海南省'},
          {value:'重庆市',key:'重庆市'},
          {value:'四川省',key:'四川省'},
          {value:'贵州省',key:'贵州省'},
          {value:'云南省',key:'云南省'},
          {value:'西藏自治区',key:'西藏自治区'},
          {value:'陕西省',key:'陕西省'},
          {value:'甘肃省',key:'甘肃省'},
          {value:'青海省',key:'青海省'},
          {value:'宁夏回族自治区',key:'宁夏回族自治区'},
          {value:'新疆维吾尔自治区',key:'新疆维吾尔自治区'},
          {value:'台湾省',key:'台湾省'},
          {value:'香港特别行政区',key:'香港特别行政区'},
          {value:'澳门特别行政区',key:'澳门特别行政区'},
        ],
        isshowxs:false,
        xsitem:{},
        zidingyi:{
          commission_name:"",
          commission_hide:0
        },
        app:"",
        sys:"",
        applog:false,
        loadlog:false,
        jilulist:[],
        jilulog:false

			}
		},
		created() {
      axios.get('/api/base/info/get').then((response)=>{
        if (response.data.msg.code == 0) {
          this.sys = response.data.data
        } else {
          this.$message.error(response.data.msg.info);
        }
      })
		},
		mounted() {
      if(window.screen.width == 1920){
        this.widthss = true
      }
      this.wailian = location.origin + '/h5/index?shop_id=' + window.btoa(JSON.parse(localStorage.getItem('user')).id)
      // this.wailian = location.origin + '/h5/index'
      this.ceshi = window.screen.width
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
        this.search.page_size = 200
        this.getlist()
        // this.onLoad()
      }else{
        this.getlist()
      }

      //获取自定义名字
      this.getzidingyi()

		},
		methods: {
      jilu:function(item){
        axios
          .get("/agent/page/commission/log?page_id="+item.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.jilulist = response.data.data
              this.jilulog = true
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      },
      getzidingyi:function(){
        axios.get('/agent/system/base/info').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.zidingyi.commission_name = response.data.data.commission_name
            this.zidingyi.commission_hide = response.data.data.commission_hide
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      chongzhi:function(){
        this.search.operator = ''
        this.search.c_commission_start = ''
        this.search.c_commission_end = ''
        this.c6show = false
        this.sousuo()
      },
      c1ok:function(v,i){
        this.search.status = v.key
        this.c1name = v.value.slice(0,4)
        this.c1show = false
      },
      c2ok:function(v,i){
        this.search.settlement_method = v.key
        this.c2name = v.value.slice(0,4)
        this.getlist()
        this.c2show = false
      },
      guanbiloadlog:function(){
        this.loadlog = false
      },
      haibao:function(item){
        // this.loadlog = true
        // this.item = JSON.parse(JSON.stringify(item))

        // this.relo = false
        // this.$nextTick(()=>{
        //   this.relo = true
        //   this.$nextTick(()=>{
        //     this.$refs.xiazaierweima.getinfo()
        //   })
        // })

        this.html2canvaslog = false;
        this.item = JSON.parse(JSON.stringify(item));
        this.$nextTick(() => {
          this.html2canvaslog = true;
          this.$nextTick(() => {
            // this.$refs.xiazaierweima.getinfo();
          });
        });

      },
      //屏蔽相关
      pingbi:function(item){
        if(item.block_id == null){
          axios.post('/agent/page/shield/set',{
            type:1,
            page_id:item.id
          }).then((response)=>{
          	if (response.data.msg.code == 0) {
              this.$message.success('屏蔽成功，您的微小店将不再显示该商品');
              this.getlist()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }
        if(item.block_id != null){
          axios.post('/agent/page/shield/set',{
            type:0,
            page_id:item.id,
            block_id:item.block_id
          }).then((response)=>{
          	if (response.data.msg.code == 0) {
              this.$message.success('已取消屏蔽');
              this.getlist()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }

      },
      logfuwenbenkai:function(item){
        console.log('item11111',item)
        this.fuwenbentitle = item.title
        this.fuwenben = item.package_text
        this.min_age = item.min_age
        this.max_age = item.max_age
        this.contract = item.contract
        this.express = item.express
        this.activation_method = item.activation_method
        this.sxjstatus = item.status
        this.created_at = item.created_at
        this.take_number = item.take_number
        this.logfuwenben = true
      },
      go2:function(url){
        this.$router.push(`/weixiaodian?shop_id=${JSON.parse(localStorage.getItem('user')).id}`)
      },
      openw2:function(item){
        // let url = location.origin + '/h5/order?id=' + item.id
        // console.log(window.btoa(JSON.parse(localStorage.getItem('user')).id))
        let url = location.origin + '/h5/order?shop_id=' + window.btoa(JSON.parse(localStorage.getItem('user')).id) + '&id=' + item.id
        this.openw(url)
      },
      fuzhidizhi:function(id){
        this.copy(`${window.location.origin}/h5/order?id=${id}&shop_id=${window.btoa(JSON.parse(localStorage.getItem('user')).id)}`)
      },
      gengxinautogrounding:function(){

        axios.post('/agent/system/config',{
          auto_grounding:this.autogrounding
        }).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('设置成功');
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      // getzidongshangjia:function(){
      //   axios.get('/agent/goods/autogrounding').then((response)=>{
      //   	if (response.data.msg.code == 0) {
      //       this.autogrounding = response.data.data.value
      //   	} else {
      //   		this.$message.error(response.data.msg.info);
      //   	}
      //   })
      // },
      xiazai:function(){
        var canvas = document.getElementsByClassName('qrcode')[0].getElementsByTagName("canvas")[0]

        var img2x = canvas.toDataURL("image/png");

        // let img = document.getElementsByClassName('qrcode')[0].childNodes[1]
        var a = document.createElement('a');
                 a.download = 'erweima';//这边是文件名，可以自定义
                 a.href = img2x;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);

        // let img = document.getElementsByClassName('qrcode')[0].childNodes[1]
        // var a = document.createElement('a');
        //          a.download = 'erweima';//这边是文件名，可以自定义
        //          a.href = img.src;
        //          document.body.appendChild(a);
        //          a.click();
        //          document.body.removeChild(a);
      },

      xiazaiapp2:function(){
        location.href = this.sys.app_url + "?attname="
      },
      xiazaiapp:function(){
        this.applog = true
        this.$nextTick(()=>{
          this.$refs.qrCodeUrlx.innerHTML = ""
          var qrcode = new QRCode(this.$refs.qrCodeUrlx, {
              text: this.sys + '?attname=', // 需要转换为二维码的内容
              width: 300,
              height: 300,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      creatQrCode(val,item) {
        var url = ""
        if(val == 1){
          url = this.wailian
        }
        if(val == 2){
          url = location.origin + '/h5/order?shop_id=' + window.btoa(JSON.parse(localStorage.getItem('user')).id) + '&id=' + item.id
        }
        console.log(url)
        this.erweima_log = true
        this.$nextTick(()=>{
          this.$refs.qrCodeUrl.innerHTML = '';
          if(this.shoujiban){
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: url, // 需要转换为二维码的内容
                width: 200,
                height: 200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
          }else{
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: url, // 需要转换为二维码的内容
                width: 400,
                height: 400,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
          }

        })
      },
      sousuo:function(){
        this.search.page = 1
        this.c6show = false
        this.getlist()
      },
      getlist:function(){
        axios.get('/agent/page/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data

            this.list.forEach(item=>{
              item.selling_point = JSON.parse(item.selling_point)
              // console.log('666666',item.selling_point)
            })
            console.log('列表')
            console.log(this.list)
            this.total = response.data.data.total
            this.shield_num = response.data.data.shield_num
            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      changestatus:function(item){
        this.search.status = item
        this.sousuo()
      },
      changorder:function(item){
        this.search.order = item
        this.sousuo()
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
      xuanzhong:function(item){
        this.dangqianshangpin = item
      },

      xiugai:function(){
        let all = JSON.parse(JSON.stringify(this.dangqianshangpin))
        all.selling_point = JSON.stringify(all.selling_point)
        axios.post('/agent/page/update',all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('设置成功');
            this.getlist()
            this.paixu_log = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      handleCommand:function(e){
        console.log(e)
        if(e == 'a'){
          this.$router.push('/shangpinguanli/gongyingshangshangpin/bianjishangpin?id='+this.dangqianshangpin.id)
        }
        if(e == 'b'){
          this.dangqianshangpin.is_top = moment().unix()
          this.xiugai()
        }
        if(e == 'bb'){
          this.dangqianshangpin.is_top = 0
          this.xiugai()
        }
        if(e == 'c'){
          this.dangqianshangpin.is_main = 1
          this.xiugai()
        }
        if(e == 'cc'){
          this.dangqianshangpin.is_main = 0
          this.xiugai()
        }
        if(e == 'd'){
          this.paixu_log = true
        }
        if(e == 'e'){
          this.dangqianshangpin.status = 0
          this.xiugai()
        }
        if(e == 'f'){
          this.dangqianshangpin.status = 100
          this.xiugai()
        }
      },
      //手机版查看资料
      clickZiliao(item){
        console.log('item11111',item)
        this.$router.push(
          { path: '/shangpinguanli/zaishoushangpinchakanziliao',
          query: {
            title: item.title ,
            detailsId:item.id
          }
         }
        )
      },
      //自定义加法运算
      addNum(arg1, arg2) {
        var r1, r2, m, c;
        try {
          r1 = arg1.toString().split(".")[1].length;
        } catch (e) {
          r1 = 0;
        }
        try {
          r2 = arg2.toString().split(".")[1].length;
        } catch (e) {
          r2 = 0;
        }
        c = Math.abs(r1 - r2);
        m = Math.pow(10, Math.max(r1, r2));
        if (c > 0) {
          var cm = Math.pow(10, c);
          if (r1 > r2) {
            arg1 = Number(arg1.toString().replace(".", ""));
            arg2 = Number(arg2.toString().replace(".", "")) * cm;
          } else {
            arg1 = Number(arg1.toString().replace(".", "")) * cm;
            arg2 = Number(arg2.toString().replace(".", ""));
          }
        } else {
          arg1 = Number(arg1.toString().replace(".", ""));
          arg2 = Number(arg2.toString().replace(".", ""));
        }
        return (arg1 + arg2) / m;
      },
      //打开佣金
      openyj(item){
        this.xsitem = item
        this.isshowxs = true
      }

		}
	}
</script>
<style scoped>
.t_jh_font{
  margin-bottom: 15px;
  font-size: 16px;
}
/deep/.el-divider--vertical{
  margin: 0;
}
</style>
<style lang="less">
.tooltip-width {
  max-width: 6rem;
}
</style>
<style scoped lang="less">
  .gongyingshangshangpin{
    .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
    .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }

    .sxjactsj{background: rgb(0, 90, 255); border-radius:0.3rem; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 3.3rem; height: 0.7rem;  }
    .sxjsj{background: rgb(227, 232, 241); border-radius:0.3rem;  text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 3.3rem; height: 0.7rem; }

    .xt{ margin-right: 10px; border-radius: 5px; font-size: 12px; padding: 5px 10px;}
    .lj{width: 90px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 10px; font-size: 14px; cursor: pointer;}
    .ljact{width: 90px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 10px; font-size: 14px; cursor: pointer;}
    .bushi3{ margin-right: 20px;}
    .el-divider--horizontal{
      margin-top:0.2rem !important;
      margin-bottom:0.2rem !important
    }


    /deep/ .el-switch__core{ width: 85px !important; height: 41px; border-radius: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241);}
    /deep/ .el-switch.is-checked .el-switch__core {
        border-color: #409EFF !important;
        background-color: #409EFF !important;
    }
    /deep/ .el-switch.is-checked .el-switch__core::after{margin-left: -33px; left: 100% !important;}
    /deep/ .el-switch__core:after{ width: 31px; height: 31px;  top: 4px; left: 4px; background: rgb(227, 232, 241);}
    .qrcode img{ max-width:100%;}
    /deep/ .minput .el-input__inner{border: 0 !important; background: transparent !important;}

  }

</style>
